<template>
    <basic-layout :title="isTel?'设置支付密码':'修改密码'" :showAddBtn="false">
        <van-form ref="form" label-width="5em">
            <van-field v-if="!isTel" v-model="pastPassword" required type="password"
                name="原始密码" label="原始密码" placeholder="请输入原密码" :maxlength="6"
                :error="false" :rules="ruleForm.past" @blur="isBlur"
            />
            <van-field v-model="newPassword" required type="password" :maxlength="6"
                name="新密码" label="新密码" placeholder="请输入新密码"
                :error="false" :rules="ruleForm.news"
            />
            <van-field v-model="affirm" required type="password" :maxlength="6"
                name="新密码确认" label="新密码确认" placeholder="请再次输入新密码"
                :error="false" :rules="ruleForm.qr"
            />
        </van-form>
            
            <van-button round type="info" block @click="onSubmit">提交</van-button>
    </basic-layout>
</template>

<script>
    import { encrypt } from "@/plugins/utils/jsencrypt";
    import { queryPersonPayment,checkPersonPayment,editPersonPayment } from '@/api/platframe/mainFrame/pay';
    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                isTel: null, // 是否设置过密码
                pastPassword: '',// 原密码
                newPassword: '',// 新密码
                affirm: '',// 确认密码
                // 必填项校验
                ruleForm: {
                    past: [
                        { required: true, message: "请输入原密码", trigger: "onBlur" },
                    ],
                    news: [
                        { required: true, message: "请输入新密码", trigger: "blur" },
                    ],
                    qr: [
                        { required: true, message: "请再次输入新密码", trigger: "blur" },
                    ],
                },
                isPast: null, // 原密码是否正确
            };
        },
        created () {
            this.getInfo();
        },
        computed: {
            userID() {
                return JSON.parse(sessionStorage.getItem("userInfo")).user;
                // "53E33C3A2D0B4E98917487B92E2586D6"
            }
        },
        mounted () {},
        watch: {},
        methods: {
            // 支付密码是否设置
            async getInfo() {
                let obj = { staffId: this.userID };
                let res = await queryPersonPayment(obj);
                if (res.code === 1000) {
                    this.isTel = res.data.count === 0; // 没有设置过密码
                }
            }, 
            // 用户id和密码校验
            async isBlur () {
                if (!Boolean(this.pastPassword)) return;
                
                //加密
                let str = encrypt(this.pastPassword);
                let obj = {
                    paymentPassword: str,
                    staffId: this.userID
                };
                let res = await checkPersonPayment(obj);
                if (res.code === 1000) {
                    if (res.data === 1) { // 原密码正确
                        this.isPast = true;
                    } else {
                        this.isPast = false;
                        this.$Notify({ type: 'warning', message: '原密码错误！' });
                    }
                }
            },
            
            /**
             * 验证密码参数有效性
             */
            isValidChangeParams(){
                if (this.newPassword.length != 6 || this.affirm.length != 6) {
                    this.$Notify({ type: 'warning', message: '密码输入长度为 6 位！' });
                    return false;
                } 
                if (this.newPassword != this.affirm) {
                    this.$Notify({ type: 'warning', message: '两次密码输入不一致，请重新输入' });
                    return false;
                } 
                if (!this.isTel && this.newPassword === this.pastPassword) {
                    this.$Notify({ type: 'warning', message: '新密码和原密码不能相同' });
                    return false;
                }
                return true;
            },
            // 提交
            onSubmit() {
                if (!this.isTel && this.pastPassword && !this.isPast) {
                    return this.$Notify({ type: 'warning', message: '原密码错误！' });
                }
                this.$refs.form.validate().then( async () => {
                    if (this.isValidChangeParams() === false) {
                        return;
                    }
                    
                    //加密
                    let newPess = encrypt(this.newPassword);
                    let obj = {
                        paymentPassword: newPess,
                        staffId: this.userID
                    };
                    let res = await editPersonPayment(obj);
                    if (res.code === 1000) {
                        this.$Notify({ type: 'success', message: '修改成功！' });
                        this.$router.go(-1);
                    }
                }).catch(() => {
                    // this.$toast.fail('请完成必填项！')
                })
            },
        }
    };
</script>

<style scoped lang="less">
::v-deep .content {
    background-color: #F4F7FA;
    padding: 12px;
    .van-form {
        padding-bottom: 32px;
        div:nth-child(1){
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        div:nth-child(4){
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
    }
}
</style>